<template lang="html">
  <el-dialog :title="dialogTitle" :append-to-body="true" :close-on-click-modal="false" :show-close="true"
    v-model="dialogVisible" @close="close" width="1200px" class="dialog-book-chapter">
    <index ref="chapter"></index>
  </el-dialog>
</template>
<script setup lang="js">
import { ref, defineExpose, nextTick } from 'vue';
import Index from '../Index.vue';
const dialogVisible = ref(false); // 弹窗是否可见
const dialogTitle = ref(""); // 弹窗标题
const chapter = ref(null); // 章节组件引用

function open(book) {
  dialogVisible.value = true;
  dialogTitle.value = book.title + ' - 目录';
  nextTick(() => {
    chapter.value.setBookId(book.id);
  })
}

defineExpose({
  openDialog: open,
});

</script>
<style lang="less">
.dialog-book-chapter {
  .book-chapter-container {
    height: 650px !important;

    .tableBox {
      padding: 0px !important;
    }
  }
}
</style>
